<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" href="css/layui.css" media="all">
		<link rel="stylesheet" href="css/bootstrap.css">
	</head>
	<body>
		<div id="firstVue" class="u-flex u-col-center">
			<div style="position: absolute;top: 0;margin-left: 40px;margin-top: 40px;border-bottom: 2px solid #00ff7f;padding-left: 10px;padding-right: 10px;" @click="get">
				<a href="javascript:void(0);">打印</a></div>
			
			<div id="wrap" style="width: 100%;padding: 50px 200px 200px 200px;">
				<div class="u-flex u-row-center u-col-center" style="width: 100%;margin-bottom: 10px;font-size: 30px;">
					个人总结表</div>
				<div style="width: 100%;border-top: 2px solid #000000;">
					<div class="u-flex p4" style="width: 100%;">
						<div class="u-flex">
							<div>姓名</div>
							<div style="margin-left: 5px;">{{user.姓名}}</div>
						</div>
						<div class="u-flex">
							<div>性别</div>
							<div style="margin-left: 5px;">{{user.性别}}</div>
						</div>
						<div class="u-flex">
							<div>班级</div>
							<div style="margin-left: 5px;">{{user.专业}}{{user.班级}}</div>
						</div>
						<div class="u-flex">
							<div>学期</div>
							<div style="margin-left: 5px;">{{user.学期}}</div>
						</div>
					</div>
					<div class="u-flex p6"
						style="width: 100%;border-top: 2px solid #000000;border-bottom: 2px solid #000000;">
						<div class="u-flex">
							<div>学号</div>
							<div style="margin-left: 5px;">{{user.学号}}</div>
						</div>
						<div class="u-flex">
							<div>总分</div>
							<div style="margin-left: 5px;">{{user.个人总分}}</div>
						</div>
						<div class="u-flex">
							<div>平均分</div>
							<div style="margin-left: 5px;">{{user.个人平均分}}</div>
						</div>
						<div class="u-flex">
							<div>最高分</div>
							<div style="margin-left: 5px;">{{user.个人最高分}}</div>
						</div>
						<div class="u-flex">
							<div>最低分</div>
							<div style="margin-left: 5px;">{{user.个人最低分}}</div>
						</div>
						<div class="u-flex">
							<div>时间</div>
							<div style="margin-left: 5px;">{{timedata}}</div>
						</div>
					</div>
				</div>
				<div
					style="border-right: 2px solid #000000;border-left: 2px solid #000000;border-bottom: 2px solid #000000;">
					<div class="u-flex u-col-center" style="border-bottom: 2px solid #000000;padding: 15px;" >科目成绩</div>
					<div>
						<div style="padding: 15px;margin-bottom: 200px;">
							<div v-for="(item, index) in xoData" :key="index">
								<div class="u-flex u-row-between" style="padding: 10px;width: 40%;">
									<div>
										{{index}}
									</div>
									<div>{{item}}分</div>
								</div>
							</div>
						</div>
						<div class="u-flex u-col-center" style="border-bottom: 2px solid #000000;border-top: 2px solid #000000;padding: 15px;position: relative;" >
							<div style="top: 10px;">总结内容 分段表</div>
						</div>
						<div class="u-flex" style="padding: 15px;height: 200px;">
							<textarea v-if="type==2" placeholder="请编辑内容" style="border: 0;width: 100%;height: 100%;" value="text" ></textarea>
							<textarea v-else readonly style="border: 0;width: 100%;height: 100%;" value="text" ></textarea>
						</div>
					</div>
				</div>
			</div>
		</div>

	</body>

	<script src="https://gw.alipayobjects.com/os/lib/antv/f2/3.7.0/dist/f2.min.js"></script>
	<script src="js/Print.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/xlsx.full.min.js" type="text/javascript" charset="utf-8"></script>
	
	<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
	<script src="layui.js" charset="utf-8"></script>
	<script src="js/public.js" type="text/javascript" charset="utf-8"></script>

	<script type="text/javascript">
		var myVue = new Vue({
			el: "#firstVue",
			data: {
				user: {
					'姓名': '昂昂昂',
					'性别': '男',
					'专业': '计算机',
					'班级': '1班',
					'学期': '大二上期',
					'学号': '0000000000000',
					'个人总分': '100',
					'个人平均分': '100',
					'个人最高分':'100',
					'个人最低分':'100'
				},
				timedata: '',
				text:'222222222',
				xoData:{
					'jvav':'100',
					'c':'100',
					'c++':'100'
				},
				chartdata:[],
				type:1
			},
			mounted: function() {
				this.$nextTick(()=> {
					
				})
			},
			methods: {
				get:function(){
					let id = '#wrap'
					Print(id, {
						onStart: function() {
							console.log('onStart', new Date())
						},
						onEnd: function() {
							console.log('onEnd', new Date())
						}
					})
				}
			}
		})



		$(function() {
			
			let type = $.cookie('type');
			myVue.type = type
			
			var t = new Date();
			myVue.timedata = t.getFullYear() + '-' + t.getMonth() + '-' + t.getDate() + ' ' + t
				.getHours() + ':' + t.getMinutes();

			try{
				let userdata = $.cookie('userdata');
				console.log("userdata",userdata)
				if(userdata){
					let json= JSON.parse(userdata)
					myVue.user =json
					
					myVue.text =json.个人评分
					
					myVue.xoData=json.总科目
					
					let 个人最高分=0
					let 个人最低分=100
					for(var i in json.总科目) {
						if (parseInt(个人最高分) < parseInt(json.总科目[i])) {
							个人最高分 = json.总科目[i]
						}
						if (parseInt(个人最低分) > parseInt(json.总科目[i])) {
							个人最低分 = json.总科目[i]
						}
					}
					myVue.user.个人最高分=个人最高分
					myVue.user.个人最低分=个人最低分
					
				}
				
				
			}catch(e){
				//TODO handle the exception
			}
			
			try{
				let chartdata = $.cookie('chartdata');
				console.log("chartdata",chartdata)
				if(chartdata){
					let json= JSON.parse(chartdata)
					myVue.chartdata =json
					
					{
						const chart = new F2.Chart({
							id: 'myChart',
							pixelRatio: window.devicePixelRatio // 指定分辨率
						});
						// Step 2: 载入数据源
						chart.source(json);
						// Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
						chart.interval().position('genre*sold').color('genre');
						// Step 4: 渲染图表
						chart.render();
					}
				}
				
				
			}catch(e){
				//TODO handle the exception
			}
			
		})
	</script>

	<style type="text/css">
		.p4>div {
			flex-grow: 4;
			border-right: 2px solid #000000;
			padding: 10px;
		}

		.p4>div:first-child {
			border-left: 2px solid #000000;
		}
		
		.p6>div {
			flex-grow: 6;
			border-right: 2px solid #000000;
			padding: 10px;
		}
		
		.p6>div:first-child {
			border-left: 2px solid #000000;
		}
	</style>


	<style type="text/css">
		.u-font-xs {
			font-size: 22rpx;
		}

		.u-font-sm {
			font-size: 26rpx;
		}

		.u-font-md {
			font-size: 28rpx;
		}

		.u-font-lg {
			font-size: 30rpx;
		}

		.u-font-xl {
			font-size: 34rpx;
		}

		.u-flex {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			align-items: center;
		}

		.u-flex-wrap {
			flex-wrap: wrap;
		}

		.u-flex-nowrap {
			flex-wrap: nowrap;
		}

		.u-col-center {
			align-items: center;
		}

		.u-col-top {
			align-items: flex-start;
		}

		.u-col-bottom {
			align-items: flex-end;
		}

		.u-row-center {
			justify-content: center;
		}

		.u-row-left {
			justify-content: flex-start;
		}

		.u-row-right {
			justify-content: flex-end;
		}

		.u-row-between {
			justify-content: space-between;
		}

		.u-row-around {
			justify-content: space-around;
		}

		.u-text-left {
			text-align: left;
		}

		.u-text-center {
			text-align: center;
		}

		.u-text-right {
			text-align: right;
		}

		.u-flex-col {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: column;
		}
	</style>

</html>
